<template>
  <div>
    <Dialog
      v-model="showDialog"
      :title="`${addData['id'] ? '编辑' : '新增'}分组`"
      :width="500"
      @confirm="submitForm"
      @close="cancel"
      @open="openDialog"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
        <el-form-item label="分组名称" prop="name">
          <el-input
            v-model="form.name"
            maxlength="10"
            show-word-limit
            clearable
            placeholder="请输入分组名称"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="所属上级">
          <TreeSelect
            class="_tree_select"
            v-model="form.parentId"
            :treeSelectData="treeSelectData"
            :expand-on-click-node="false"
            :check-strictly="true"
            :treeProps="{ label: 'name', disabled: ((data: any)=>{ return Boolean(!data.nodeType) }) }"
            placeholder="所属上级非必填"
            @confirm="treeSelectChange"
          ></TreeSelect>
        </el-form-item>
        <el-form-item label="是否有下级分组" prop="exit">
          <el-radio-group v-model="form.nodeType" :disabled="addData['id']">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
import CustomerApi from "@/api/customerApi";
import TreeSelect from "@/components/TreeSelect/TreeSelect.vue";
const props = withDefaults(
  defineProps<{
    showDialog: boolean;
    treeCurrentId?: string | number;
    addData: object;
  }>(),
  {
    treeCurrentId: "",
  }
);
const treeCurrentId = toRef(props, "treeCurrentId");
const { showDialog, addData } = toRefs(props);
const treeSelectData = ref([] as any)
const formRef = ref();
const form = ref({
  id: null,
  parentId: "" as string | number,
  name: "",
  nodeType: 1,
} as any);
const rules = ref({
  name: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
});
const openDialog = () => {
  getTreeData()
  if (addData.value["id"]) {
    form.value = addData.value;
    form.value.parentId = addData.value["parentId"];
  } else {
    form.value.parentId = treeCurrentId.value;
  }
};

const getTreeData = async () => {
  let rs = await CustomerApi.getCustomersGroupTree({nodeType: 1});
  if (rs.code === 200) {
    treeSelectData.value = rs.payload;
  }
};

const submitForm = async () => {
  if (treeSelectChange(form.value.parentId)) {
    return true;
  }
  await formRef.value.validate((valid: any) => {
    if (valid) {
      setGroupTreeSaveOrUpdate();
    }
  });
};

const setGroupTreeSaveOrUpdate = async () => {
  let rs = await CustomerApi.setGroupTreeSaveOrUpdate(form.value);
  if (rs.code === 200) {
    ElMessage.success(`${addData.value["id"] ? "编辑" : "新增"}成功`);
    confirm();
  }
};
const treeSelectChange = (val: any) => {
  
  if (val) {
    if (val == form.value.id) {
      ElMessage.warning("所属上级不可以设置为自己");
      return true;
    }
  }
  return false;
};
const confirm = () => {
  emit("confirm", form.value.parentId);
  cancel();
};
const cancel = () => {
  emit("cancel");
  formRef.value.resetFields();
  form.value = {
    id: null,
    parentId: "",
    name: "",
    nodeType: 1,
  };
};
const emit = defineEmits(["confirm", "cancel"]);
</script>
<style lang="scss" scoped>
._tree_select {
  width: 100%;
}
</style>
